<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <form action="" id="form">
      用户名: <input type="text" name="username" id="" /> <br />
      密码: <input type="text" name="password" id="" /> <br />
      介绍: <textarea name="info" id="" cols="30" rows="10"></textarea> <br />
      <button id="btn">注册</button>
    </form>

    <script>
      const btn = document.getElementById('btn')
      btn.onclick = function (e) {
        e.preventDefault()
        // formdata是js中提供的一个对象,专门用来管理表单数据的
        //获取表单的dom对象
        const form = document.getElementById('form')
        // formdata实例对象中就有form表单中的所有有name属性的数据.就无需一个一个获取了
        // 注意: formdata中只会存储写了name属性的表单元素的值
        const formdata = new FormData(form)

        // console.log(formdata) // 注意: 此时formdata中确实有表单数据,但是不允许直接在控制台打印查看
        // console.log(formdata.get('username'))
        // console.log(formdata.get('password'))
        // console.log(formdata.get('info'))

        // 除了表单中写name属性的数据之外,我们程序员也可以额外的往formdata中添加数据
        // formdata.append('键',值)
        // formdata.append('id', 99999)
        // formdata.append('xxx', 'abc')
        // formdata.append('yyy', '110')

        //如何将formdata的数据通过ajax发送给服务器
        const xhr = new XMLHttpRequest()
        // 注意: ajax配合formdata,只能用post请求
        xhr.open('post', 'http://localhost:5000/b')
        // 注意: 如果是ajax配合formdata,则无需设置请求头.因为浏览器会自动帮我们设置
        // multipart/form-data;
        xhr.send(formdata)
      }
    </script>
  </body>
</html>
